<template>
  <a-row justify="center" :gutter="[20]">
    <a-col :span="22">
      <div class="container">
        <div class="class-detail-top-title">
          <span class="status">{{ classInfo.status }}</span>
          <span class="title">{{ classInfo.title }}</span>
        </div>
        <div class="class-detail-top-progress">
          <div class="class-detail-top-progress-c">
            <a-progress type="circle" :percent="75" :width="140">
              <template #format="percent">
                <p class="class-detail-top-progress-tip">学习进度</p>
                <p style="color: red">{{ percent }}%</p>
              </template>
            </a-progress>
          </div>

          <div class="class-detail-top-progress-item">
            <p class="class-detail-top-progress-item-t">已完成</p>
            <p class="class-detail-top-progress-item-d">0/80任务</p>
          </div>
          <div class="class-detail-top-progress-item">
            <p class="class-detail-top-progress-item-t">学习有效期</p>
            <p class="class-detail-top-progress-item-d">2023-03-31</p>
          </div>
          <div class="class-detail-top-progress-item" style="width: 100%;flex: 1;">
            <p class="class-detail-top-progress-item-t">下一学习任务</p>
            <p class="class-detail-top-progress-item-d">考前导学</p>
          </div>
          <a-button size="large" type="primary">开始学习</a-button>
        </div>
      </div>
    </a-col>
    <a-col :span="16">
      <div class="container" style="min-height: 800px;margin-bottom: 30px">
        <a-tabs :active-key="tabActivity" @change="tabsChange">
          <a-tab-pane v-for="(tab,index) in tabOptions" :key="tab.key" :tab="tab.tab"></a-tab-pane>
        </a-tabs>
        <a-collapse :bordered="false" v-show="tabActivity==1">
          <a-collapse-panel v-for="(catalogue,index) in classInfo.catalogues" :key="index" :header="catalogue.title">
            <div v-for="(chapter,chapterIndex) in catalogue.classList"
                 :key="chapterIndex" class="class-detail-chapter-item" @click="classPlayer(chapter)">
              <span class="class-detail-chapter-item-title">
                <i class="iconfont icon-check-item" style="color: rgba(65, 192, 164, 1);"></i>
                {{ chapter.title }}
              </span>
              <span class="class-detail-chapter-item-time">
                {{ chapter.time }}
                <i class="iconfont icon-customer-service" />
              </span>
            </div>
          </a-collapse-panel>
        </a-collapse>
        <div v-show="tabActivity==2">
          {{classInfo.brief}}
        </div>
      </div>
    </a-col>
    <a-col :span="6">
      <div class="container"></div>
    </a-col>
  </a-row>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { $ref } from "vue/macros";
import useCurrentInstance from "@/utils/useCurrentInstance";
const {router,route} =useCurrentInstance()
let tabActivity = $ref("1");
let id: string | number;
let tabOptions = [
  { key: "1", tab: "目录" }, { key: "2", tab: "介绍" }
];
let classInfo = {
  title: "PMP®精讲课程(新)",
  status: "已完结",
  brief: "报名考生必须具备35小时以上项目管理PMBOK学习或培训经历，35个PDU证书并出示证书复印件。报名考试者必须具备以下两类情况之一。",
  catalogues: [
    {
      title: "第1章: 引论",
      classList: [
        {
          title: "课时1：考前导学", time: "01:00:06"
        },
        {
          title: "课时2：引论01", time: "01:00:06"
        },
        {
          title: "课时3：引论02", time: "01:00:06"
        }
      ]
    },
    {
      title: "第2章: 项目运行环境",
      classList: [
        {
          title: "课时4：考前导学", time: "01:00:06"
        },
        {
          title: "课时5：引论01", time: "01:00:06"
        },
        {
          title: "课时6：引论02", time: "01:00:06"
        }
      ]
    }
  ]
};

/**
 * 选项卡切换
 * @param activeKey
 */
function tabsChange(activeKey: string) {
  tabActivity = activeKey;
}
function classPlayer(item:any) {
  item.url="http://rni4rzhn1.hb-bkt.clouddn.com/WeChat_20221226222926.mp4"
  router.push({path:"/openClass/player",query:{url:item.url}})
}
onMounted(() => {
  id = route.query.id as string || "";
});
</script>
<style scoped lang="less">
.container {
  width: 100%;
  background: white;
  border-radius: 4px;
  border: 1px solid #e4ecf3;
  position: relative;
  box-sizing: border-box;
  margin-top: 30px;
  padding: 20px 30px;
}

.class-detail-top-title {
  display: flex;

  .status {
    width: 50px;
    height: 60px;
    background: #2c3e50;
    color: white;
    display: inline-block;
    font-size: 12px;
    position: relative;
    box-sizing: border-box;
    padding: 5px 10px;
    text-align: center;
    margin-right: 10px;
  }

  .status:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: 13px solid #ffffff;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
  }

  .title {
    font-size: 24px;
  }
}

.class-detail-top-progress {
  display: flex;
  position: relative;
  box-sizing: border-box;
  background: #fafafa;
  margin-top: 70px;
  align-items: center;
  padding: 10px 100px;

  .class-detail-top-progress-c {
    width: 160px;
    height: 160px;
    padding: 10px;
    box-shadow: 10px 10px 18px 12px #fafafa;
    position: relative;
    box-sizing: border-box;
    background: white;
    border-radius: 50%;
    top: -50px;

    /deep/ .class-detail-top-progress-tip {
      font-size: 14px;
      margin: 0;
    }
  }

  .class-detail-top-progress-item {
    margin-left: 50px;

    .class-detail-top-progress-item-d {
      font-size: 20px;
      color: #333333;
    }

    .class-detail-top-progress-item-t {
      font-size: 14px;
      color: #c1c1c1;
      margin: 0 0 10px;
    }
  }
}
.class-detail-chapter-item{
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #333333;
  padding: 0 10px;
  cursor: pointer;
  &:hover{
    background: rgba(65, 192, 164, 0.1);
  }
}
</style>
